<template>
  <div class="sale-report">
    <DateRange class="date-range" :handle-date-change="handleDateChange"></DateRange>
    <Charts :data-source="dataSet.dataSource" :chart-type="chartType" :size="size" :index="index"/>
  </div>
</template>
<script>
import DateRange from "../../common/DateRange";
import Charts from "../../func/statement/Charts";
import moment from "moment";
import {loadReport} from "../models/staff";

export default {
  name: "PersonalReport",
  components:{Charts,DateRange},
  props:['account','index'],
  data(){
    return{
      size:"width:60vw;height:50vh;",
      dataSet:[],
      chartType:this._mytype.chartType.LINE,
      start:moment().format('YYYY-MM-01'),
      end:moment(moment().endOf("month")).format('YYYY-MM-DD'),
    }
  },
  methods:{
    handleDateChange(value){
      this.start=value[0];
      this.end=value[1];
      this.loadDataSet();
    },
    loadDataSet(){
      console.log(this.account)
      loadReport(this.start,this.end,this.account).then(resp=>{
        this.dataSet=resp.data;
      })
    }
  },
  watch:{
    account:function (){
      console.log(this.account)
      this.loadDataSet();
    }
  },
  mounted() {
    //console.log(this.account)
    this.loadDataSet();
  }
}
</script>

<style scoped>
.sale-report{
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>
